<template>
	<view class="drawer">
		<view class="drawer-btn" @click="open('drawer','left')">
			左
		</view>
		<view class="drawer-btn" @click="open('drawer','right')">
			右
		</view>
		<view class="drawer-btn" @click="open('drawerBotton','botton')">
			下
		</view>
		<uniDrawer class="uni-drawer" ref="drawer"  :mode="show" :mask-click="true" @change="change($event,'drawer')">
			<view style="height: 100%;" @click="close('drawer')"></view>
		</uniDrawer>
		<uniDrawerBotton class="uni-drawer" ref="drawerBotton"  mode="botton" :mask-click="true" @change="change($event,'drawerBotton')">
			<view style="height: 100%;" @click="close('drawerBotton')">
				<scroll-view scroll-y="true" class="scroll-view-box">
					<view></view>
				</scroll-view>
			</view>
		</uniDrawerBotton>
		
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniDrawerBotton from "@/components/uni-drawer/uni-drawer-bottom.vue"
	export default{
		components:{
			uniDrawer,
			uniDrawerBotton
		},
		data(){
			return{
				show:'left'
			}
		},
		methods:{
			open(e,s){
				this.show = s
				this.$refs[e].open()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
			},
			// 关闭
			close(e){
				this.$refs[e].close()
			},
		}
	}
</script>

<style lang="scss">
	/* 处理抽屉内容滚动 */
	.scroll-view-box {
		flex: 1;
		position: absolute;
		background-color: #FFFFFF;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0 30rpx;
		height: 350rpx;
		/* padding-bottom: 30rpx; */
		/* padding-top: 36rpx; */
	}
	.drawer-btn{
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: #0081FF;
		color: #fff;
		border-radius: 20rpx;
		margin:20rpx auto ;
	}
</style>
